<template>
  <van-nav-bar
    left-text="返回"
    left-arrow
    :title="$route.meta.title"
    @click-left="onClickLeft"
  >
    <template #right>
      <van-popover
        v-model="showPopover"
        placement="bottom-end"
        trigger="click"
        :actions="actions"
        @select="selectPopover"
      >
        <template #reference>
          <i class="iconfont">&#xe684;</i>
        </template>
      </van-popover>
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { icon: 'wap-home-o', text: '首页', path: '/home' },
        { icon: 'apps-o', text: '分类', path: '/category' },
        { icon: 'cart-o', text: '购物车', path: '/cart' },
        { icon: 'contact', text: '个人中心', path: '/mine' },
      ],
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    selectPopover(action) {
      this.$router.push(action.path)
    },
  },
}
</script>

<style lang="less" scoped>
  /deep/.van-nav-bar__text {
    color: #d81e06;
  }
  .van-nav-bar /deep/.van-icon {
    color: #d81e06;
  }
</style>
